<template>
  <el-container class="mainContent">
    <NavMenu></NavMenu>
    <el-container class="mainContent">
      <el-header height="50px">
        <BreadCrumb></BreadCrumb>
        <div class="biaoshi">
          <div class="el-badgebox">
            <el-badge :value="1" class="item" :max="99">
              <i class="el-icon-bell"></i>
            </el-badge>
          </div>
          <el-dropdown trigger="click">
            <div class="el-dropdown-link">
              <el-avatar
                size="small"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              <i class="el-icon-caret-bottom"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  class="closeWindowBtn"
                  @click.native="dialogFormUpdate = true"
                  type="primary"
                  >个人信息</el-dropdown-item
                >
                <el-dropdown-item
                  class="closeWindowBtn"
                  @click.native="closeWindow"
                  >退出</el-dropdown-item
                >
              </el-dropdown-menu>
            </div>
            <!-- 个人信息模态框 -->
            <el-dialog
              title="可编辑个人信息"
              :visible.sync="dialogFormUpdate"
              width="40%"
            >
              <!-- 对话框主体区域 -->
              <el-form
                :model="updateUser"
                :rules="updateUserRules"
                ref="updateUserRules"
                label-width="70px"
              >
                <el-form-item label="用户名:" prop="Uname">
                  <el-input v-model="updateUser.Uname"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="Upassword">
                  <el-input v-model="updateUser.Upassword"></el-input>
                </el-form-item>
                <el-form-item label="邮箱:" prop="Email">
                  <el-input v-model="updateUser.Email"></el-input>
                </el-form-item>
                <el-form-item label="电话:" prop="Uphone">
                  <el-input v-model="updateUser.Uphone"></el-input>
                </el-form-item>
                <el-form-item label="角色:">
                  <el-input
                    v-model="updateUser.Rname"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
              </el-form>
              <!-- 对话框底部区域 -->
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormUpdate = false">取 消</el-button>
                <el-button type="primary" @click="updateUserInfo()"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </el-dropdown>
        </div>
      </el-header>
      <el-container class="mainContent2">
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import store from "@/store";
import BreadCrumb from "./components/BreadCrumb.vue";
import NavMenu from "./components/NavMenu.vue";
export default {
  data() {
    return {
      dialogFormUpdate: false,
      Uid: "",
      updateUser: {
        Uid: "",
        Uname: "",
        Upassword: "",
        Uphone: "",
        Email: "",
        Upwd: "",
        Rname: "",
      },
      updateUserRules: {
        Uname: [
          { required: true, message: "请输入您的用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在3到10个字符之间",
            trigger: "blur",
          },
        ],
        Upwd: [
          { required: true, message: "请输入您的密码", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在3到10个字符之间",
            trigger: "blur",
          },
        ],
        Email: [
          { required: true, message: "请输入您的电子邮箱", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (
                /^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(
                  value
                ) == false
              ) {
                callback(new Error("邮箱格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        Uphone: [
          { required: true, message: "请输入您的电话号码", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (/^1[345789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  components: {
    NavMenu,
    BreadCrumb,
  },
  methods: {
    //点击修改获取个人信息数据
    getPersonalInformation() {
      this.Uid = localStorage.getItem("Uid");
      let that = this;
      that.$axios
        .get(`/personalInformation?Uid=${this.Uid}`) //补上后台接口即可
        .then((res) => {
          // 请求成功
          that.updateUser = res.data;
        })
        .catch((error) => {
          // 请求失败
          console.log("请求失败");
          console.log(error);
        });
    },
    // 修改个人信息
    updateUserInfo() {
      this.$refs.updateUserRules.validate(async (valid) => {
        if (!valid) return this.$message.error("请正确填写修改个人信息");
        await this.$axios
          .post("/updatePersonalInformation", this.updateUser)
          .then((res) => {
            if (res.data > 0) {
              this.$message.success({
                type: "success",
                message: "修改成功请重新登录",
              });
              this.dialogFormUpdate = false;
            } else {
              this.$message.error("修改失败");
            }
          })
          .catch((error) => {
            console.log(error);
          });
      });
    },
    //退出
    closeWindow() {
      window.localStorage.clear();
      this.$router.push("/");
      store.dispatch("CLEARNAV");
      // this.$router.go(0);
      this.$router.push("/");
    },
  },
  mounted() {
    this.getPersonalInformation();
  },
};
</script>

<style scoped>
@import url(../../assets/css/HomeView.css);

.paginationBlock {
  margin-left: 90px;
}

.el-card .el-col {
  margin-right: 8px;
}

.allocationRoleDialog .el-dialog__body {
  padding: 15px 35px;
}
</style>
